<template>
  <div class="finance-dialog">
    <el-dialog
      :show-close="false"
      :append-to-body="true"
      :before-close="dialogClose"
      :visible.sync="dateDialog"
      class="small-common-dialog-size"
      width="40%">
      <div class="content">
        <div class="center dialog-title">请选择标记成本创建时间范围</div>
        <span class="center">提示：若成本创建时间不在此范围则标红</span>
        <div class="center mt10">
          <el-date-picker
            v-model="value"
            :unlink-panels="true"
            :editable="false"
            :picker-options="pickerOptions"
            :default-time="['00:00:00', '23:59:59']"
            size="small"
            type="datetimerange"
            range-separator="至"
            value-format="timestamp"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            align="center"
            @close="resetDate"/>
        </div>
        <div slot="footer" class="mt10 center">
          <export-button
            ref="orderExportRef"
            :export-api="exportApi"
            :export-name="exportName"
            :format="format || 'xlsx'"
            :is-before-export="true"
            is-diy
            @onErrorExport="onErrorExport"
            @onComplate="exportonComplate"
            @beforeExport="beforeExport">
            <el-button type="primary" class="btn"><i v-if="loading" class="el-icon-loading"/> 确定</el-button>
          </export-button>
          <el-button class="btn ml20" plain @click="dialogClose">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ExportButton from '@/components/ExportButton';
import { paramsRangeFormat } from '@/utils/paramsFormat';

export default {
  components: {
    ExportButton
  },
  props: {
    dateDialog: {
      type: Boolean,
      default: false
    },
    needCategoryAry: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      exportApi: 'admin/order/financeExport',
      exportName: '财务报表',
      format: '',
      loading: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value: '',
      paramsObj: {},
      rangeKeyArr: [{
        attr: 'orderTime',
        start: 'orderStartTime',
        end: 'orderEndTime',
        type: 'time'
      }, {
        attr: 'createTime',
        start: 'createStartTime',
        end: 'createEndTime',
        type: 'time'
      }, {
        attr: 'arrivalTime',
        start: 'arrivalStartTime',
        end: 'arrivaltEndTime',
        type: 'time'
      }, {
        attr: 'deleteTime',
        start: 'deleteStartTime',
        end: 'deleteEndTime',
        type: 'time'
      }, {
        attr: 'taxAmount',
        start: 'taxAmountStart',
        end: 'taxAmountEnd',
        type: 'moneyFixed'
      }]
    };
  },
  methods: {
    initParams(paramsObj) {
      this.paramsObj = paramsObj;
    },
    formatParams(paramsObj) {
      const params = JSON.parse(JSON.stringify(paramsObj));
      paramsRangeFormat(this.rangeKeyArr, params);
      if (params.accountBelong && typeof params.accountBelong !== 'string' && params.accountBelong.length > 0) {
        params.accountBelong = params.accountBelong.join(',');
      }
      if (params.needCategoryId) {
        const needCategoryIds = this.searchingLoop(params.needCategoryId, this.needCategoryAry);
        needCategoryIds.push(params.needCategoryId);
        params.needCategoryId = needCategoryIds.join(',');
      }
      params.startTime = this.value[0];
      params.endTime = this.value[1];
      return params;
    },
    /**
     * 工具
     */
    /* 递归循环品牌标签获取id START */
    searchingLoop(needCategoryId, ary) {
      const itemAry = this.getItemAry(ary, needCategoryId);
      return this.setId(itemAry);
    },
    setId(ary) {
      const needCategoryIds = [];
      const loop = (list) => {
        for (const i in list) {
          needCategoryIds.push(list[i].id);
          if (list[i].item && list[i].item.length) {
            loop(list[i].item);
          }
        }
      };
      loop(ary);
      return needCategoryIds;
    },
    getItemAry(list, needCategoryId) {
      let ans = null;
      const callback = (listItem, id) => {
        for (let i = 0; i < listItem.length; i++) {
          if (listItem[i].id === id) {
            ans = listItem[i].item;
            return listItem[i].item;
          }
          if (listItem[i].item) {
            callback(listItem[i].item, id);
          }
        }
      };
      callback(list, needCategoryId);
      return ans;
    },
    // 导出财务报表
    exportFinanceList() {
      this.dialogClose();
    },
    dialogClose() {
      this.$emit('closeDialog');
      this.resetDate();
    },
    resetDate() {
      this.value = '';
      this.loading = false;
    },
    beforeExport() {
      if (this.value.length < 2) {
        this.$message.warning('请选择标记成本创建时间范围');
        return;
      }
      const params = this.formatParams(this.paramsObj);
      let msg = '<div>是否确定导出数据？</div>';
      if (!params.ids) {
        msg = msg + `<div style="color: red;font-size: 14px;">单次最多导出5000条</div>`;
      }
      this.btnExport(params, msg);
    },
    exportonComplate() {
      this.dialogClose();
    },
    onErrorExport() {
      this.loading = false;
    },
    btnExport(params, message = '是否确定导出数据？') {
      if (!this.loading && this.$refs.orderExportRef) {
        this.$confirm(message, '', {
          confirmButtonText: '确定',
          type: 'warning',
          dangerouslyUseHTMLString: true,
          showClose: false,
          center: true,
          iconClass: 'charge-icon',
          customClass: 'del-message del-message-cancel'
        }).then(() => {
          this.loading = true;
          this.$refs.orderExportRef.btnExport(params);
        }).catch(() => {
          this.loading = false;
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
  .dialog-title{
        color: black;
    }
  .content{
    .btn{
      width: 120px;
    }
    &::v-deep {
      .center{
        display: flex;
        justify-content: center;
      }
      .dialog-title{
        font-size: 18px;
        margin-bottom:10px ;
      }
      .el-range-input {
        width: 140px;
      }
      .el-range-separator {
        width: 22px;
      }
    }
  }
</style>

